<template>
  <div>
    <div class="page1">
      <span>每页显示条数：</span>
      <select id="pageSize" v-model="pageSize">
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="7">7</option>
      </select>
      <span>
        当前页：
        <b id="currentPage">{{pageData.currentPage}}</b>/
        <b id="totalPages">{{pageData.totalPages}}</b>
      </span>
      <span>
        共计
        <b id="totalNum">{{pageData.totalNum}}</b>条数据
      </span>
    </div>
    <div class="pages">
      <div class="page">
        <el-button size="small" @click="firstpage1">首页</el-button>
        <el-button size="small" icon="el-icon-arrow-left" @click="lastpage1">上一页</el-button>
        <div class="boxm">
          <el-button size="small" num="1">1</el-button>
          <el-button size="small"num="0">2</el-button>
          <el-button size="small" num="0">3</el-button>
          <el-button size="small" num="0">4</el-button>
          <el-button size="small" num="0">5</el-button>
        </div>
        <el-button size="small"   @click="nextpage1">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        <el-button size="small" @click="endpage1">尾页</el-button>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "productcategory"
);

export default {
  computed: {
    ...mapState(["pageData"]),
     pageSize:{
         get(){
             return this.pageData.pageSize;
         },
         set(val){
             this.changeshowpage(val);
             this.showCategorys();
         }
     },
  },
  watch:{
    'pageData.pageSize'(){
      this.showCategorys();
    }
  },
  methods: {
    ...mapActions(["showCategorys"]),
    ...mapMutations([
      "nextpage",
      "changeshowpage",
      "firstpage",
      "endpage",
      "lastpage",

    ]),
    //下一页
    nextpage1() {
      this.nextpage();
      console.log(this.pageData.totalPages);
      this.showCategorys();
    },
    //切换页数
    changeshowpage1() {
      this.changeshowpage();
      this.showCategorys();
    },
    firstpage1() {
      this.firstpage();
      this.showCategorys();
    },
    endpage1() {
      this.endpage();
      this.showCategorys();
    },
    lastpage1() {
      this.lastpage();
      this.showCategorys();
    },
  },
  watch: {},
};
</script>


<style scoped >
.page1 {
  margin-top: 20px;
  font-size: 13px;
}
.pages {
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pages .page {
  margin: 0px auto;
  height: 22px;
  line-height: 22px;
  color: gray;
  display: flex;
  flex-direction: row;
}
.pages .page button {
  font-size: 12px;
  margin: 0px 3px;
  padding: 0px 10px;
  min-width: 25px;
  background-color: white;
  border: 1px solid gray;
}
.pages .page span {
  font-size: 12px;
  margin-left: 5px;
}
</style>